<template>
    <div class="directives">
        <div class="code-box" v-for="(item, index) in data" :key="index">
            <t :id="item.title || ''" v-html="item.title || ''"></t>
            <template v-if="item.des">
                <li v-for="d in item.des" :key="d" v-html="d"></li>
            </template>
            <pre-code :code="item.code"></pre-code>
        </div>

        <el-backtop target=".main-container"></el-backtop>
    </div>
</template>

<script>
import { useStore } from 'vuex';
import { ref, onMounted } from 'vue';

export default {
    name: 'Directives',
    setup() {
        const store = useStore();
        onMounted(() => { store.commit('updateArticleTree'); });

        const dialogVisible = ref(false);

        return {
            dialogVisible,
            data: [
                {
                    title: 'v-watermark',
                    des: [
                        '你可以在任意元素上添加<span class="s-code">v-watermark</span>指令，使其获得水印效果',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`<template>
    <div id="app" v-watermark="watermark"></div>
    <button @click="changeWatermark">修改水印文案</button>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const watermark = ref('sibionics-ui 组件库演示');
        return {
            watermark,
            changeWatermark: () => {
                watermark.value = '奔跑的提款机';
            },
        };
    },
};
<\/script>
`,
                },
            ],
        };
    },
};
</script>
